<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
	  xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<title>个人中心</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Best Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
	<div th:include="css :: css"></div>
<!-- //animation-effect -->
</head>
	
<body>
<!-- header -->
<div th:include="/header :: header" ></div>
<!-- //header -->
<!-- breadcrumbs -->
	<div class="breadcrumbs">
		<div class="container">
			<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">
				<li><a href="index.html"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>主页</a></li>
				<li class="active">个人中心</li>
			</ol>
		</div>
	</div>
<!-- //breadcrumbs -->
<!-- mail -->
	<div class="mail animated wow zoomIn" data-wow-delay=".5s" id="content">
		<div class="container">
			<h3>个人主页</h3>
			<p class="est">我的小窝</p>
			<div class="mail-grids">
				<div class="col-md-8 mail-grid-left animated wow slideInLeft" data-wow-delay=".5s">
					<form>
						<input type="text"  v-model="userinfo.name" value="昵称" />
						<input type="text"  v-model="userinfo.code" value="账号" />
						<input type="text"  v-model="userinfo.age" value="年龄" />
						<input type="text"  v-model="userinfo.sex" value="性别" />
						<input type="button" value="修改资料" id="update"  class="btn btn-warning" style="width: 100%;" />
					</form>
					<br>
					<a style="width: 100%" href="/order"  class="btn btn-warning">我的订单</a>
				</div>
				<div class="col-md-4 mail-grid-right animated wow slideInRight" data-wow-delay=".5s">
					<div class="mail-grid-right1">
						<img v-bind:src="userinfo.head" alt=" " class="img-responsive" />
						<h4>{{userinfo.name}} <span>{{userinfo.code}}</span></h4>
						<ul class="phone-mail">
							<li>年龄:{{userinfo.age}}</li>
							<li>性别:{{userinfo.sex}}</li>
						</ul>
					</div>
				</div>
				<div class="clearfix">
                    <form method="post" id="head" enctype="multipart/form-data" action="/file/upload">
                        更换头像<input type="file" name="file">
                        <input type="submit" value="提交">
                    </form>
				</div>
			</div>
			<h1>我的地址</h1>
			<table class="table">
				<thead>
				<tr>
					<th>地址编号</th>
					<th>省</th>
					<th>市</th>
					<th>区或者县</th>
					<th>描述</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="item in addresslist">
					<td>{{item.id}}</td>
					<td>{{item.province}}</td>
					<td>{{item.city}}</td>
					<td>{{item.county}}</td>
					<td>{{item.detail}}</td>
					<td><span class="label label-info" v-on:click="dell(item.id)">删除</span></td>
				</tr>
				</tbody>
			</table>
			<!--<iframe class="animated wow slideInLeft" data-wow-delay=".5s" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3098.7638135888296!2d-77.47669308468912!3d39.04350424592369!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b63eb3bc8da92b%3A0x78c8e09ab1cabc90!2sShopping+Plaza%2C+Ashburn%2C+VA+20147%2C+USA!5e0!3m2!1sen!2sin!4v1457602090579" frameborder="0" style="border:0" allowfullscreen></iframe>-->
		</div>
	</div>
<!-- //mail -->
<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="footer-logo animated wow slideInUp" data-wow-delay=".5s">
				<h2><a href="index.html">易购网<span>你得贴心小窝</span></a></h2>
			</div>
			<div class="copy-right animated wow slideInUp" data-wow-delay=".5s">
				<p>Copyright &copy; 2018</p>
			</div>
		</div>
	</div>
<!-- //footer -->
<script>
    var vm = new Vue({
        el: '#content',
        data: {
            userinfo:{},
            addresslist:null
        },
		methods: {
            dell: function (id) {
                $.ajax({
                    url: '/order/delete',
                    type: 'POST',
                    data:{
                        id:id
                    }
                }).done(function (res) {
                    console.log(res.obj)
                    if(res.code==1001){
                        alert("删除成功");
                        inits();
                    }else{
                        alert("删除失败")
                    }
                    console.log("地址success");
                })
                    .fail(function () {
                        console.log("error");
                    })
                    .always(function () {
                        console.log("complete");
                    });
            }
        }
    })
    init();
 function init(){
     $.ajax({
         url: '/user/data',
         type: 'GET',
     })
         .done(function(res) {
             if (res == null){
                 window.location.href="/login"
             } else{
                 console.log(res.obj)
                 vm.userinfo = res.obj;
                 console.log(res.obj);
             }
         })
         .fail(function() {
             console.log("error");
         })
         .always(function() {
             console.log("complete");
         });
 }

    $("#update").click(function(){
        $.ajax({
            url: '/user/update',
            type: 'post',
            dataType: 'json',
            async: false,
            data: {
                id:localStorage.shopuserid,
                name:vm.userinfo.name,
				age:vm.userinfo.age,
				code:vm.userinfo.code,
                sex:vm.userinfo.sex
			},
            success:function(data){
                console.log(data)
                if (data.code==1001){
                    alert("更新成功")
                    init();
                } else{
                    alert("更新失败")
                }
            },
            error:function(){

            }
        });
    });

    inits();
    function inits(){
        $.ajax({
            url: '/address/find/user',
            type: 'GET',
        }).done(function (res) {
            console.log(res.obj)
            vm.addresslist = res.obj
            console.log("地址success");
        })
            .fail(function () {
                console.log("error");
            })
            .always(function () {
                console.log("complete");
            });
    }

    $("#head").submit(function(){
        $(this).ajaxSubmit({
            success: function (data) {
                $.ajax({
                    url: '/user/update',
                    type: 'post',
                    dataType: 'json',
                    async: false,
                    data: {
                        id:localStorage.shopuserid,
                        name:vm.userinfo.name,
                        age:vm.userinfo.age,
                        code:vm.userinfo.code,
                        sex:vm.userinfo.sex,
                        head: data.obj
                    },
                    success:function(data){
                        console.log(data)
                        if (data.code==1001){
                            alert("更新成功")
                            init();
                        } else{
                            alert("更新失败")
                        }
                    },
                    error:function(){

                    }
                });
            },
            error: function(err) {},
            clearForm: true
        });
        return false;   //阻止表单默认提交
    })
</script>
</body>
</html>